<!DOCTYPE html>
<html>
<head>
    <title>Badges</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div data-role="view" id="badges-profile" data-title="Profile" data-layout="mobile-tabstrip" data-show="addTimer" data-hide="removeTimer">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>Profile
            <ul>
                <li><h2>Carine <span>Callahan</span></h2><img src="../content/mobile/overview/carine.jpg" /></li>
                <li>Weekly average sales <span class="sales-up">$ 8,250</span></li>
                <li>Monthly average sales <span class="sales-up">$ 32,000</span></li>
            </ul>
        </li>
        <li>
            Languages
            <ul>
                <li>English <span class="value">Native</span></li>
                <li>Hungarian <span class="value">Advanced</span></li>
                <li>French <span class="value">Advanced</span></li>
                <li>Chinese <span class="value">Beginner</span></li>
            </ul>
        </li>
        <li>
            Sales commodity
            <ul>
                <li>Beverages</li>
                <li>Condiments</li>
                <li>Confections</li>
                <li>Diary Products</li>
                <li>Grains/Cereals</li>
                <li>Meat/Poultry</li>
                <li>Produce</li>
                <li>Seafood</li>
            </ul>
        </li>
        <li>
            PC Skills
            <ul>
                <li>MS Word</li>
                <li>MS Excel</li>
                <li>MS Outlook</li>
                <li>MS PowerPoint</li>
                <li>MS Project</li>
                <li>Windows (XP, Vista)</li>
                <li>Internet</li>
                <li>SAP - Sales and Marketing Module</li>
                <li>MS Visual Studio</li>
                <li>Adobe Acrobat</li>
                <li>CorelDraw</li>
            </ul>
        </li>
    </ul>
</div>

<div data-role="view" id="badges-sales" data-title="Sales History" data-layout="mobile-tabstrip">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>
            Sales 2011
            <ul>
                <li>January <span class="sales-up">&uarr; $ 35,000</span></li>
                <li>February <span class="sales-down">&darr; $ 25,000</span></li>
                <li>March <span class="sales-down">&darr; $ 23,000</span></li>
                <li>April <span class="sales-up">&uarr; $ 30,000</span></li>
                <li>May <span class="sales-up">&uarr; $ 31,000</span></li>
                <li>June <span class="sales-down">&darr; $ 29,000</span></li>
                <li>July <span class="sales-up">&uarr; $ 35,000</span></li>
                <li>August <span class="sales-up">&uarr; $ 37,000</span></li>
                <li>September <span class="sales-hold">&rarr; $ 37,000</span></li>
                <li>October <span class="sales-hold">&rarr; $ 37,000</span></li>
                <li>November <span class="sales-up">&uarr; $ 38,000</span></li>
                <li>December <span class="sales-up">&uarr; $ 40,000</span></li>
            </ul>
        </li>
    </ul>
</div>

<div data-role="layout" data-id="mobile-tabstrip">
    <header data-role="header">
        <div data-role="navbar">
            <!--<a class="nav-button" data-align="left" data-role="backbutton">Back</a>-->
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
        </div>
    </header>

    <p>TabStrip</p>

    <div data-role="footer">
        <div data-role="tabstrip" id="badges-tabs">
            <a href="#badges-profile" data-icon="home">Home
            </a><a href="#badges-sales" data-icon="edit" data-badge="10">Mail</a>
        </div>
    </div>
</div>

<script>
    var timer;

    function changeTabBadge() {
        var tabstrip = $("#badges-tabs").data("kendoMobileTabStrip");
        if (!tabstrip) {
            removeTimer();
            return;
        }

        tabstrip.badge("a:last", +tabstrip.badge("a:last") + 5);
    }

    function addTimer() {
        timer = setInterval(changeTabBadge, 1000);
    }

    function removeTimer() {
        clearInterval(timer);
    }
</script>

<style scoped>
    #badges-profile h2 {
        display: inline-block;
        font-size: 1.1em;
        margin: 1.5em 0 0 .7em;
    }
    #badges-profile h2 span {
        display: block;
        clear: both;
        font-size: 1.8em;
        margin: .1em 0 0 0;
    }
    #badges-profile img {
        width: 5em;
        height: 5em;
        float: left;
        margin: 1em;
        border: 1px solid rgba(0,0,0,.2);
        -webkit-border-radius: 4em;
        border-radius: 4em;
    }

    .sales-down,
    .sales-hold,
    .sales-up,
    .value {
        float: right;
    }
    .sales-up { color: green; }
    .sales-down { color: red; }
    .sales-hold { color: blue; }
    .value { color: #bbb; }
</style>


    
    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
    
    
</body>
</html>
